<template>
  <el-table
    :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="userId"
      prop="userId">
    </el-table-column>
    <el-table-column
      label="userName"
      prop="userName">
    </el-table-column>

    <el-table-column
      label="userLevel"
      prop="userLevel">
    </el-table-column>

    <el-table-column
      label="loginStatu"
      prop="loginStatu">
    </el-table-column>

    <el-table-column
      label="封禁">
      <template slot-scope="scope">
        <el-switch
          @change="userEnable(scope.$index, scope.row)"
          v-model="scope.row.userStatu"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <i class="el-icon-lock"></i>
      </template>
  </el-table-column>

  <el-table-column
      label="删除">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>
      </template>
  </el-table-column>

    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getUserList } from '@/api/table'
import { userEnableChange } from '@/api/table' 
import { userDelete } from '@/api/table' 
  export default {
    data() {
      return {
        tableData: [],
        search: '',
        token: ""
      }
    },

    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    created () {
          var key = encodeURIComponent('/auth/info')
          this.$data.token = this.getCookie(key)
          this.selectUserInfo(this.$data.token)
      },

    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        userDelete(this.$data.token, row.userName).then(response => {
          this.$message({
              message: response.message,
              type: "success",
            });
          this.selectUserInfo(this.$data.token)
        })
      },
      userEnable(index, row){
        userEnableChange(this.$data.token, row.userName, row.userStatu).then(response => {
            this.$message({
              message: response.message,
              type: "success",
            });
        })
      },
      selectUserInfo(token){
        getUserList(token).then(response => {
          this.$data.tableData = response.data
        })
      },
      getCookie(name) {
        var arr;
        var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if ((arr = document.cookie.match(reg))) 
          return unescape(arr[2]);
        else 
          return null; document.cookie = name + "=" + escape(value);
      },
    },
  }
</script>